<!--<div class="form-title">
    <h1>新增活动</h1>
</div>-->
<div class="card">
    <div class="card-header">
        <strong>新增活动</strong>
    </div>
    <form class="card-body form-horizontal">
        <div class="form-group row">
            <label class="col-sm-2 control-label"> 
                <span class="red">*</span>活动名称 
            </label>
            <div class="col-sm-9">
                <input type="text" id="text-input" name="text-input" class="form-control col-sm-5" placeholder="Text">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 control-label"> 
                类型 
            </label>
            <div class="col-sm-9">
                <div class="col-sm-5 no-padding">
                    <ng-select 
                        [items]="selectTypeArr.items"
                        [active]="selectTypeArr.defaultItems"
                        [disabled]="selectTypeArr.disabled"
                        [allowClear]="false"
                        (selected)="selected($event)"
                        placeholder="No city selected">
                    </ng-select>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 control-label"> 
                <span class="red">*</span>抽奖次数
            </label>
            <div class="col-sm-9">
                <input type="text" class="form-control col-sm-5">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 control-label"> 
                报名时间
            </label>
            <div class="col-sm-9 my-row">
                <input type="text" class="form-control col-sm-5">
                <label class="col-sm-1 control-label" style="text-align:center;">至</label>
                <input type="text" class="form-control col-sm-5">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 control-label"> 
                <span class="red">*</span>活动时间
            </label>
            <div class="col-sm-9 my-row">
                <input type="text" class="form-control col-sm-5">
                <label class="col-sm-1 control-label" style="text-align:center;">至</label>
                <input type="text" class="form-control col-sm-5">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 control-label"> 
                <span class="red">*</span>活动地点
            </label>
            <div class="col-sm-9">
                <input type="text" class="form-control col-sm-5">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 control-label"> 
                <span class="red">*</span>报名填写项
            </label>
            <div class="col-sm-8">
                <label class="middle checkbox-lab" *ngFor="let item of signOptionList;">
                    <input class="ace" type="checkbox" name="signOptions" [checked]="item.checked" [disabled]="item.disabled">
                    <span class="lbl">
                        {{item.name}}
                    </span>
                </label>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 control-label"> 
                <span class="red">*</span>报名提醒
            </label>
            <div class="col-sm-8">
                <label class="middle checkbox-lab">
                    <input class="ace" type="radio" checked name="recommend" value ="1" >
                    <span class="lbl">提醒</span>
                </label>
                <label class="middle checkbox-lab">
                    <input class="ace" type="radio" name="recommend" value ="2" >
                    <span class="lbl">不提醒</span>
                </label>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 control-label"> 
                <span class="red">*</span>活动详情
            </label>
            <div class="col-sm-8">
                <ckeditor
                    name = "ck"
                    [(ngModel)]="ckeditorContent"
                    [config] = "ckConfig"
                    [readonly]="false"
                    debounce="500">
                </ckeditor>
            </div>
        </div>
        <div [hidden]="!moreOptionStatus">
            <div class="form-group row">
                <label class="col-sm-2 control-label"> 
                    活动人数
                </label>
                <div class="col-sm-8 my-row">
                    <input class="form-control col-xs-10 col-sm-5" type="number" min="0">
                    <label class="col-sm-5 control-label text-left"> 为0时表示不限制 </label>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 control-label"> 
                    邀请码
                </label>
                <div class="col-sm-8 my-row">
                    <input class="form-control col-xs-10 col-sm-5" maxlength="6" type="number" minlength="4">
                    <label class="col-sm-7 control-label text-left"> 4-6位数字，用户报名时填写此邀请码才能报名 </label>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 control-label"> 
                    顶部大图
                </label>
                <div class="col-sm-5">
                    <label for="" class="ace-file-input">
                        <label class="ace-loading" *ngIf="activityDefault.hotImgLoading">
                            <i class="ace-icon fa fa-spinner fa-spin orange bigger-125"></i>
                        </label>
                        <input type="file" ng2FileSelect [uploader]="uploader"/>  
                        <span class="ace-file-container" data-title="选择图片">
                            <span class="ace-file-name" data-title="{{activityDefault.hotImgFile}}">
                                <i class=" ace-icon fa fa-upload"></i>
                            </span>
                        </span>                      
                    </label>
                    <img style="height:100px;" [src]="activityObject.hotImg">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 control-label"> 
                    分享小图
                </label>
                <div class="col-sm-5">
                    <label for="" class="ace-file-input">
                        <label class="ace-loading" *ngIf="activityDefault.shareImgLoading">
                            <i class="ace-icon fa fa-spinner fa-spin orange bigger-125"></i>
                        </label>
                        <input type="file" ng2FileSelect [uploader]="shareUploader"/>  
                        <span class="ace-file-container" data-title="选择图片">
                            <span class="ace-file-name" data-title="{{activityDefault.shareImgFile}}">
                                <i class=" ace-icon fa fa-upload"></i>
                            </span>
                        </span>                      
                    </label>
                    <img style="height:100px;" [src]="activityObject.shareImg">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 control-label"> 
                    分享图片事例
                </label>
                <div class="col-sm-9">
                    <img src='../../../assets/img/share_big.jpg' style="width: 150px;">
                    <img src='../../../assets/img/share_small.png' style="width: 150px;">
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 control-label"> 
            </label>
            <div class="col-sm-8">
                <button type="button" (click)="loadMoreOption()" class="btn btn-outline-primary">{{moreOptionStatus?"收起更多选项":"更多选项"}}</button>
            </div>
        </div>
        <hr>
        <div class="form-group row">
            <label class="col-sm-2 control-label"> 
            </label>
            <div class="col-sm-8">
                <button type="submit" class="btn btn-primary">
                    <i class="fa fa-dot-circle-o"></i> 保存</button>
                &nbsp;
                <button type="reset" class="btn btn-danger">
                    <i class="fa fa-ban"></i> 重置</button>
            </div>
        </div>
    </form>
</div>